<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: HeAo
 * @LastEditTime: 2022-01-06 09:32:56
-->
<template>
  <div id="monthlyContainer" style="height: 80%">right2</div>
</template>


<script>
import { Line } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  methods: {
    init() {
      // 1.准备数据
      const data = [
        {
          engineer: "广西科技大学2021-11",
          name: "temperture",
          value: 20,
        },
        {
          engineer: "广西科技大学2021-12",
          name: "temperture",
          value: 15,
        },
        {
          engineer: "广西科技大学2022-01",
          name: "temperture",
          value: 10,
        },

        {
          engineer: "广西科技大学2021-11",
          name: "wind_speed",
          value: 7,
        },
        {
          engineer: "广西科技大学2021-12",
          name: "wind_speed",
          value: 1,
        },
        {
          engineer: "广西科技大学2022-01",
          name: "wind_speed",
          value: 4,
        },

        {
          engineer: "广西科技大学2021-11",
          name: "wind_direction",
          value: 47,
        },
        {
          engineer: "广西科技大学2021-12",
          name: "wind_direction",
          value: 100,
        },
        {
          engineer: "广西科技大学2022-01",
          name: "wind_direction",
          value: 150,
        },
      ];
      // 2.初始化实例，配置配置项

      const line = new Line("monthlyContainer", {
        data,
        xField: "engineer",
        yField: "value",
        seriesField: "name",
        xAxis: {
          label: {
            style: {
              fill: "white",
            },
          },
        },
        yAxis: {
          label: {},
        },
      });
      // 3.执行绘画

      line.render();
    },
  },
  // vue实例完全挂载到页面上
  mounted() {
    this.init();
  },
};
</script>
<style scoped>
</style>